<template>
  <el-pagination v-model:current-page="pageParams.page" v-model:page-size="pageParams.rows"
    :page-sizes="[10, 20, 30, 40]" :size="size" :disabled="disabled" :background="background"
    layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
    @current-change="handleCurrentChange" style="margin-top: 20px;" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { ComponentSize } from 'element-plus'
import { defineProps, defineEmits } from 'vue'

const size = ref<ComponentSize>('default')
const background = ref(true)
const disabled = ref(false)
const props = defineProps({
  total: {
    type: Number,
    default: 0
  },
  pageParams: {
    type: Object
  }
})

const emit = defineEmits(["sizeChange", "currentChange"])
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  emit('sizeChange', val)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  emit('currentChange', val)
}
</script>